<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="`${form.id ? '编辑' : '新增'}考勤机`"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <header>
          <a-steps
            label-placement="vertical"
            style="width: 50%; margin: 0 auto; margin-bottom: 20px"
            changeable
            :current="current"
          >
            <a-step>
              <template #description>
                <div class="stepBox" style="color: #58aaff">
                  <div>填写设备信息</div>
                  <div>填写考勤机的设备名称、设备型号和设备sn号</div>
                </div>
              </template>
            </a-step>
            <a-step>
              <template #description>
                <div
                  class="stepBox"
                  :style="{ color: current === 2 ? '#58aaff' : '#8690b6' }"
                >
                  <div>初始化设备</div>
                  <div>配置考勤机的参数，使考勤机可以和服务器进行通讯</div>
                </div>
              </template>
            </a-step>
          </a-steps>
        </header>
        <a-form
          v-show="current === 1"
          ref="formRef"
          :model="form"
          autoLabelWidth
          label-align="right"
          style="width: 30%; margin: 0 auto"
          :rules="rules"
        >
          <!-- <a-form-item field="name" label="设备品牌" required show-colon>
            <a-input v-model="form.name" />
          </a-form-item> -->
          <a-form-item label="设备名称" required show-colon>
            <a-input v-model="form.name" />
          </a-form-item>
          <a-form-item label="设备型号" required show-colon>
            <a-input v-model="form.model" />
          </a-form-item>
          <a-form-item label="设备SN号" required show-colon>
            <a-input v-model="form.sn" />
          </a-form-item>
          <a-form-item label="设备管理员" required show-colon>
            <a-select
              placeholder="请选择"
              v-model="form.manager"
              :options="repeatData.data"
              :field-names="{ value: 'id', label: 'name' }"
            >
            </a-select>
          </a-form-item>
          <a-form-item label="管理员密码" required show-colon>
            <a-input v-model="form.password" />
          </a-form-item>
        </a-form>
        <div class="step-two" v-show="current === 2">
          <a-alert banner center>
            <template #icon
              ><icon-info-circle :size="18" style="color: #ff8787" />
            </template>
            请根据此页面提供的参数，在考勤机中配置，使考勤机可以和服务器进行通讯
          </a-alert>
          <a-card
            :style="{ width: '40%', margin: '50px auto' }"
            title="Arco Card"
          >
            <template #title>
              <div style="text-align: center">
                <span style="font-weight: 600">服务器地址：</span>
                192.168.1.100：8083
              </div>
            </template>
            <div class="prompt">
              <div><icon-bulb :size="20" style="color: #ffc824" /></div>
              <div>
                <p>系统提示</p>
                <p>这是一段后端返回的系统提示</p>
              </div>
            </div>
          </a-card>
        </div>
      </main>
      <footer>
        <a-button
          class="btn"
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          v-show="current === 1"
          @click="$router.go(-1)"
          >返回</a-button
        >
        <a-button
          v-show="current === 1"
          class="btn"
          type="primary"
          @click="current = 2"
          >下一步</a-button
        >
        <a-button
          class="btn"
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          v-show="current === 2"
          @click="current = 1"
          >上一步</a-button
        >
        <a-button
          v-show="current === 2"
          class="btn"
          type="primary"
          @click="save"
          >完成</a-button
        >
      </footer>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';
import {
  GetMachineRepeat,
  PutMachine,
  PostMachine
} from '@/apis/attendance/base-setting/index';
import { useRouter } from 'vue-router';
import { GetHumanRosterList } from '@/apis/management/human/humanRoster';
const router = useRouter();

const type = ref<1 | 2 | 3>(1);
const breadCrumb: string[] = ['考勤', '基础设置', '考勤设置', '考勤机设置'];
const formRef = ref();
const current = ref(1);
const repeatData = reactive({ data: [] });

const form = reactive<any>({});
const getRepeat = async () => {
  const res: any = await GetHumanRosterList({
    pageNumber: 0,
    pageSize: -1,
    typeName: '5'
  });
  repeatData.data = res.content;
  console.log(repeatData.data, res.content);
};

const validateName = async (val: string, cb: any) => {
  try {
    if (form.id && form.name === val) {
      return;
    } else {
      const res = await GetMachineRepeat({
        name: val
      });
      console.log(123, res, res.code);
      if (res.code) cb(`${res.msg}`);
    }
  } catch (error: unknown) {
    console.log(error);
  }
};
const rules = {
  name: [
    {
      required: true,
      message: '请填写名称',
      trigger: "['change', 'input', 'blur']"
    },
    {
      validator: validateName
    }
  ]
};

onMounted(() => {
  Object.assign(form, JSON.parse(localStorage.getItem('machineData') + ''));
  console.log(form);

  getRepeat();
});

const save = async () => {
  try {
    if (await formRef.value.validate()) return;
    if (form.id) {
      await PutMachine(form);
    } else {
      await PostMachine(form);
    }
    router.back();
  } catch (error) {
    console.log(error);
  }
};
onUnmounted(() => {
  localStorage.removeItem('machineData');
});
</script>
<style lang="less" scoped>
.wrap {
  main {
    margin-bottom: 60px;
    overflow: hidden;

    header {
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;
    }
    header h2 {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    header h2::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 30px;
      background-color: #165dff;
      margin-right: 10px;
    }
  }
  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
.stepBox {
  width: 200px;
  text-align: start;

  div:nth-child(1) {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
.step-two {
  width: 100%;
}
.prompt {
  display: flex;
  div:nth-child(2) {
    margin-left: 10px;
    p:nth-child(1) {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style>
